<!-- index.vue：用户管理的主页面 -->
<template>
  <div class="user-management">
    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="机构">
            <el-input v-model="searchForm.org_id" placeholder="请输入机构ID" clearable style="width: 220px" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="启用" value="1" />
              <el-option label="封禁" value="2" />
              <el-option label="已排除" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 用户列表 -->
    <div class="user-list">
      <el-card>
        <div slot="header" class="card-header">
          <span>用户列表</span>
          <div style="float: right;">
            <el-button type="warning" size="mini" @click="batchRemoveFromOrg">移出机构</el-button>
          </div>
        </div>

        <el-table ref="userTable" v-loading="loading" :data="userList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="uid" label="UID" width="150">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.uid" placement="top" :disabled="scope.row.uid.length <= 12">
                <div slot="content" class="tooltip-content">
                  <div class="tooltip-text">{{ scope.row.uid }}</div>
                  <el-button size="mini" type="text" class="copy-btn" @click="copyToClipboard(scope.row.uid)">
                    <i class="el-icon-copy-document" /> 复制
                  </el-button>
                </div>
                <span class="truncated-text">{{ truncateText(scope.row.uid, 12) }}</span>
              </el-tooltip>
              <span v-else class="empty-value">无</span>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="账户名" min-width="120" show-overflow-tooltip />
          <el-table-column prop="email" label="邮箱" min-width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.email" class="email-text">{{ scope.row.email }}</span>
              <span v-else class="empty-value">无</span>
            </template>
          </el-table-column>
          <el-table-column prop="openid" label="微信ID" width="150">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.openid" placement="top" :disabled="scope.row.openid.length <= 12">
                <div slot="content" class="tooltip-content">
                  <div class="tooltip-text">{{ scope.row.openid }}</div>
                  <el-button size="mini" type="text" class="copy-btn" @click="copyToClipboard(scope.row.openid)">
                    <i class="el-icon-copy-document" /> 复制
                  </el-button>
                </div>
                <span class="truncated-text">{{ truncateText(scope.row.openid, 12) }}</span>
              </el-tooltip>
              <span v-else class="empty-value">无</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === '1'" type="success">启用</el-tag>
              <el-tag v-else-if="scope.row.status === '2'" type="danger">封禁</el-tag>
              <el-tag v-else-if="scope.row.status === '3'" type="info">已排除</el-tag>
              <el-tag v-else type="warning">未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="orgId" label="机构ID" width="120">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.orgId" placement="top" :disabled="scope.row.orgId.length <= 8">
                <div slot="content" class="tooltip-content">
                  <div class="tooltip-text">{{ scope.row.orgId }}</div>
                  <el-button size="mini" type="text" class="copy-btn" @click="copyToClipboard(scope.row.orgId)">
                    <i class="el-icon-copy-document" /> 复制
                  </el-button>
                </div>
                <span class="truncated-text">{{ truncateText(scope.row.orgId, 8) }}</span>
              </el-tooltip>
              <span v-else class="empty-value">无</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240" fixed="right">
            <template slot-scope="scope">
              <div class="operation-buttons">
                <el-button size="mini" type="primary" @click="viewDetails(scope.row)">详情</el-button>
                <el-button
                  size="mini"
                  :type="getStatusButtonType(scope.row.status)"
                  :disabled="scope.row.status === '3'"
                  @click="toggleStatus(scope.row)"
                >
                  {{ getStatusButtonText(scope.row.status) }}
                </el-button>
                <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchForm.pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog :title="userDialogTitle" :visible.sync="userDialogVisible" width="50%">
      <el-form
        ref="userForm"
        :model="userForm"
        :rules="userRules"
        label-width="100px"
      >
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="userForm.userId" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item v-if="!userForm.uid" label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="userForm.status" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="封禁" value="2" />
            <el-option label="已排除" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="机构ID" prop="orgId">
          <el-input v-model="userForm.orgId" placeholder="请输入机构ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userMixin from '@/mixins/userMixin.js'

export default {
  name: 'UserManagement',
  mixins: [userMixin]
}
</script>

<style lang="scss" scoped src="@/styles/user.scss"></style>
